<template>
  <div id="login">
    <div class="loginBox">
      <van-image fit="contain" :src="require('../assets/img/top_bg.png')" />
      <div class="main">
        <van-tabs type="line" animated v-model:active="active">
          <van-tab title="登录">
            <van-form @submit="loginHandle()" style="margin-top: 1rem">
              <van-field
                v-model="loginData.identifier"
                name="用户名"
                label="用户名"
                placeholder="请填写手机号/用户名/邮箱"
                :rules="[{ required: true, message: '请填写手机号/用户名/邮箱' }]"
              />
              <van-field
                v-model="loginData.credential"
                type="password"
                name="密码"
                label="密码"
                placeholder="请填写密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="margin: 16px;">
                <van-button size="small" color="linear-gradient(to right, #ff6034, #ee0a24)" round block native-type="submit">立即登录</van-button>
              </div>
            </van-form>
          </van-tab>
          <van-tab title="注册">
            <van-form @submit="registerHandle()" style="margin-top: 1rem">
              <van-field
                v-model="registerData.identifier"
                name="用户名"
                label="用户名"
                placeholder="请填写手机号/用户名/邮箱"
                :rules="[{ required: true, message: '请填写手机号/用户名/邮箱' }]"
              />
              <van-field
                v-model="registerData.credential"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <van-field
                v-model="registerData.confirmPassword"
                type="password"
                name="确认密码"
                label="确认密码"
                placeholder="确认密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="margin: 16px;">
                <van-button size="small" color="linear-gradient(to right, #ff6034, #ee0a24)" round block @click="registerHandle()">立即注册</van-button>
              </div>
            </van-form>
          </van-tab>
        </van-tabs>
        <!-- 第三方登录 -->
        <van-divider>微信授权登录</van-divider>
        <van-grid :column-num="1" :border="false">
          <van-grid-item @click="thirdLogin('wechat')">
            <van-icon name="wechat" color="#04BE02" size="40"/>
          </van-grid-item>
        </van-grid>
        <!--尾部-->
        <div class="footer">
          <p>登录使用就表示同意用户协议<a href="javascript:">条款</a>和<a href="javascript:">隐私</a>政策</p>
          <p>@应乘风 2023</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie"
import { reactive, toRefs } from "vue"
import { useRouter } from "vue-router"
import { login,register,wxAuthUrl } from "@/api/member";
import { showSuccessToast, showFailToast, showConfirmDialog  } from "vant"
export default {
  setup() {
    const router = useRouter()
    const state = reactive({
      active: 0,
      loginData: {
        identityType: 'account',
        identifier: '',
        credential: '',
      },
      registerData: {
        identityType: 'account',
        identifier: '',
        credential: '',
        confirmPassword: ''
      }
    })

    const loginHandle = () => {
      login(state.loginData).then(({data: res})=> {
        if(res.code !== 0){
          return showFailToast(res.msg);
        }
        Cookies.set('token', res.data.token)
        setTimeout(()=> {
          router.push("/")
        }, 100)
      })
    }

    const registerHandle = () => {
      if(state.registerData.credential != state.registerData.confirmPassword){
           showFailToast('两次输入密码不一致！')
      }
      register(state.registerData).then(({data: res}) => {
        if(res.code !== 0){
          return showFailToast(res.msg);
        }
        showSuccessToast('注册成功')
        state.active = 0
        close()
      }).catch(() => {})
    }

    const close = () => {
      state.registerData ={};
    }

    const thirdLogin = (value) =>{
      if (value==="wechat"){
        wxAuthUrl(value).then((res) => {
          window.location.href = res.data;
        })
      }else {
        showFailToast({
          message: '暂不支持'+value+'登录',
          icon: value,
        })
      }
    }

    return {
      ...toRefs(state),
      loginHandle,
      registerHandle,
      thirdLogin
    }
  }
}

</script>

<style scoped>
#login {
  text-align: center;
  background: url("../assets/img/top_bg.png") no-repeat fixed;
  background-size: 100% 100%;
}

.loginBox {
  font-size: 1.167rem;
  background-color: #fff;
}

.loginBox .main {
  padding: 0 2rem;
}

.footer p{
  font-size: 12px;
  color: #666666;
  letter-spacing: 1px;
}
.footer p a{
  color: #ff6034;
}

</style>
